<template>
  <div class="profile">
    <nav-bar class="navbar">
      <div slot="center">我的</div>
    </nav-bar>
    
    <section class="profile-number">
          <router-link :to="user._id ? '/usercenter' : '/login'" class="profile-link">
            <div class="profile_image">
              <i class="iconfont icon-person"></i>
            </div>
            <div class="user-info">
              <p class="user-info-top" v-show="!user.phone">{{user.name ? user.name : '登录/注册'}}</p>
              <p v-show="!user.name">
                <span class="user-icon">
                  <i class="iconfont icon-shouji icon-mobile"></i>
                </span>
                <span class="icon-mobile-number">{{user.phone ? user.phone : '暂无绑定手机号'}}</span>
              </p>
            </div>
            <span class="arrow">
              <i class="iconfont icon-jiantou1"></i>
            </span>
          </router-link>
        </section>
        <section class="profile_info_data border-1px">
          <ul class="info_data_list">
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0.00</span>元</span>
              <span class="info_data_bottom">我的余额</span>
            </a>
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0</span>个</span>
              <span class="info_data_bottom">我的优惠</span>
            </a>
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0</span>分</span>
              <span class="info_data_bottom">我的积分</span>
            </a>
          </ul>
        </section>
        <section class="profile_my_order border-1px">
          <!-- 我的订单 -->
          <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-order-s"></i>
            </span>
            <div class="my_order_div">
              <span>我的订单</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
          <!-- 积分商城 -->
          <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-jifen"></i>
            </span>
            <div class="my_order_div">
              <span>积分商城</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
          <!-- 硅谷外卖会员卡 -->
          <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-vip"></i>
            </span>
            <div class="my_order_div">
              <span>硅谷外卖会员卡</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
        </section>
        <section class="profile_my_order border-1px">
          <!-- 服务中心 -->
          <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-fuwu"></i>
            </span>
            <div class="my_order_div">
              <span>服务中心</span>
              <span class="my_order_icon">
                <i class="iconfont icon-jiantou1"></i>
              </span>
            </div>
          </a>
        </section>
        <mt-button type="danger" size="large" v-show="user._id" @click="logout">退出登录</mt-button>
  </div>
</template>
<script>
import NavBar from "@/components/common/navbar/NavBar";
import {mapState} from 'vuex'
import {MessageBox} from 'mint-ui'
export default {
  components: {
    NavBar
  },
  computed: {
      // ...mapState(['user'])
      ...mapState({
        user: state => state.user.user
      })
  },
  methods:{
    // 退出登录
    logout(){
     MessageBox.confirm('确定要退出吗?').then(action => {
        this.$store.dispatch('resetUser')
    },() => {})
      
    }
  }
}
</script>
<style lang="less" scoped>
.profile{
  .navbar{
      background-color: #02a774;
      color: #fff;
      position: fixed;
  }

  .profile-number {
          margin-top: 44px;

          .profile-link {
            *zoom: 1;
            position: relative;
            display: block;
            background: #02a774;
            padding: 20px 10px;

            &::after {
              content: '';
              display: block;
              clear: both;
            }

            .profile_image {
              float: left;
              width: 60px;
              height: 60px;
              border-radius: 50%;
              overflow: hidden;
              vertical-align: top;
              color: #7e8c8d;

              .icon-person {
                background: #e4e4e4;
                font-size: 62px;
              }
            }

            .user-info {
              float: left;
              margin-top: 8px;
              margin-left: 15px;

              p {
                font-weight: 700;
                font-size: 18px;
                color: #fff;

                &.user-info-top {
                  padding-bottom: 8px;
                }

                .user-icon {
                  display: inline-block;
                  margin-left: -15px;
                  margin-right: 5px;
                  width: 20px;
                  height: 20px;

                  .icon-mobile {
                    font-size: 30px;
                    vertical-align: text-top;
                  }
                }

                .icon-mobile-number {
                  font-size: 14px;
                  color: #fff;
                  margin-left: 5px;
                }
              }
            }

            .arrow {
              width: 12px;
              height: 12px;
              position: absolute;
              right: 15px;
              top: 40%;

              .icon-jiantou1 {
                color: #fff;
                font-size: 5px;
              }
            }
          }
        }

        .profile_info_data {
          position: relative;
          width: 100%;
          background: #fff;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            z-index: 200;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: #e4e4e4;
            transform: scaleY(0.5);
          }

          .info_data_list {
            *zoom: 1;

            &::after {
              content: '';
              display: block;
              clear: both;
            }

            .info_data_link {
              float: left;
              width: 33%;
              text-align: center;
              border-right: 1px solid #f1f1f1;

              .info_data_top {
                display: block;
                width: 100%;
                font-size: 14px;
                color: #333;
                padding: 15px 5px 10px;

                span {
                  display: inline-block;
                  font-size: 30px;
                  color: #f90;
                  font-weight: 700;
                  line-height: 30px;
                }
              }

              .info_data_bottom {
                display: inline-block;
                font-size: 14px;
                color: #666;
                font-weight: 400;
                padding-bottom: 10px;
              }

              &:nth-of-type(2) .info_data_top span {
                color: #ff5f3e;
              }

              &:nth-of-type(3) {
                border: 0;

                .info_data_top span {
                  color: #6ac20b;
                }
              }
            }
          }
        }

        .profile_my_order {
          position: relative;
          margin-top: 10px;
          background: #fff;

          &::before {
            content: '';
            position: absolute;
            z-index: 200;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            background-color: #e4e4e4;
          }

          .my_order {
            display: flex;
            align-items: center;
            padding-left: 15px;

            > span {
              display: flex;
              align-items: center;
              width: 20px;
              height: 20px;

              > .iconfont {
                margin-left: -10px;
                font-size: 30px;
              }

              .icon-order-s {
                color: #02a774;
              }

              .icon-jifen {
                color: #ff5f3e;
              }

              .icon-vip {
                color: #f90;
              }

              .icon-fuwu {
                color: #02a774;
              }
            }

            .my_order_div {
              width: 100%;
              border-bottom: 1px solid #f1f1f1;
              padding: 18px 10px 18px 0;
              font-size: 16px;
              color: #333;
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;

              span {
                display: block;
              }

              .my_order_icon {
                width: 10px;
                height: 10px;

                .icon-jiantou1 {
                  color: #bbb;
                  font-size: 10px;
                }
              }
            }
          }
        }
}
</style>
